<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标签生成器</title>
    <style>
        hr {
            height: 0.2em;
            /*水平线高：0.2字符尺寸*/
            border: 0;
            /*无边框*/
            color: #CCCCCC;
            /*前景色：浅灰色*/
            background-color: #CCCCCC;
            /*背景色：浅灰色*/
            text-indent: 0;
            /*文本缩进：无*/
        }
    </style>
</head>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/mailpane.js"></script>
<script type="text/javascript" src="../.debugTemp/wpsjsrpcsdk.js"></script>

<body>
    <button id="btnRefresh" onclick="onbuttonclick('btnRefresh')">载入可用表名称</button>

    <p style="font-weight: bold;">数据源表：</p>
    <select id="datasrc"></select>

    <p style="font-weight: bold;">标签模板表：</p>
    <select id="datatemp"></select>
    <p style="color: brown;">说明：标签模板表中需要填充数据的单元格应以数据源表中对应字段名来命名。除模板必须的内容外，模板表中不应包括其它内容。</p>

    <p style="font-weight: bold;">源表中字段名列表行的行号：</p>
    <input id="fieldLineNumber" type="number" value="1" />

    <p style="color: brown;">说明：如果数据源表第一行不是字段名组成的行，必须修改这个值，从此行第二行起，为具体数据行（称为记录）。因为字段名要用来作为模板中对应单元格的名字，所以不应使用特殊字符作字段名。
    </p>

    <hr>
    
    <p><input type="CheckBox" id="ckxAutoFormatBoolValue" checked="false" style="vertical-align:top;"/><span style="font-weight: bold;vertical-align: top;">自动格式化布尔值</span></p>
    <table>
        <tr>
            <td><button id="btnPreviewFirstLine" onclick="OnPreview('First')">|&lt;</button></td>
            <td><button id="btnPreviewPreLine" onclick="OnPreview('Preview')">&lt;</button></td>
            <td><button id="btnPreviewNextLine" onclick="OnPreview('Next')">&gt;</button></td>
            <td><button id="btnPreviewLastLine" onclick="OnPreview('Last')">&gt;|</button></td>
            <td>
                <input id="iptIndex" type="number" style="width:50px;vertical-align: center;margin-top: 4px;" />
            </td>
            <td>
                <button id="btnPreviewJumpTo" onclick="OnPreview('JumpTo')">Go</button>
            </td>
            <!--<td><p id="msg" style="color:red;">已填充到模板！</p></td>-->
        </tr>
    </table>
    <hr>

    <p style="color:brown;">每记录导出一个图像文件。</p>
    <p style="color: red;">【注意：记录多时，对内存要求很高！】</p>
    <p>命名规则：</p>
    <p>
        <input id="inputFileNameRule" type="text" value="{序号}-{年级}-{班级}-{姓名}-{身份证号}" style="width: 100%;">
    </p>
    <p style="text-align: center;width: 100%;">
        <button id="btnExportImages" style="width: 100%;padding: 4px 50px;margin-top: 5px;"
            onclick="onbuttonclick('btnExportImages')">生成标签图像文件</button>
    </p>

    <hr>

    <p style="font-weight: bold;">输出时标签块的栏数：</p>
    <select id="columnsCount">
        <option value="1">1 栏</option>
        <option value="2">2 栏</option>
        <option value="3">3 栏</option>
        <option value="4">4 栏</option>
        <option value="5">5 栏</option>
        <option value="6">6 栏</option>
        <option value="7">7 栏</option>
        <option value="8">8 栏</option>
    </select>
    <p style="color: brown;">说明：这是指横向排列几个标签后另起一行继续排列标签块（每个标签块对应源表中一条记录）。</p>

    <p><input type="CheckBox" id="ckxInsertPageBreaker" checked="false" style="vertical-align:top;" />
        <span style="font-weight: bold;vertical-align: top;">每记录行插入分页符</span></p>

    <p style="text-align: center;width: 100%;">
        <button id="btnOk" style="width: 100%;padding: 4px 50px;margin-top: 20px;"
                onclick="onbuttonclick('btnOk')">生成标签文件</button>
    </p>
</body>

<style>
    .global {
        min-height: 95%;
    }

    .divItem {
        margin-left: 5px;
        margin-bottom: 18px;
        word-wrap: break-word;
    }

    body {
        font-size: 11px;
    }

    button {
        font-size: 11px;
        width: 100%;
        padding: 4px 10px;
        margin-top: 5px;
    }

    select {
        height: 24px;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>

</html>